<template>
  <div>
    <van-nav-bar title="注册" fixed left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="home-o" size="22" />
      </template>
    </van-nav-bar>
    <!-- 页面表单信息 -->
    <van-form @submit="onSubmit" class="myform">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ pattern: namevalid, message: '请正确填写用户名' }]"
      />
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ pattern: emailvalid, message: '请正确填写邮箱' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern: pwdvalid, message: '密码不符合要求' }]"
      />

      <van-field
        v-model="repassword"
        type="password"
        name="password"
        label="重复密码"
        placeholder="重复密码"
        :rules="[{ validator: verify_repw, message: '前后密码不一致' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
    <!-- 前往登录链接 -->
    <van-row style="font-size:15px;">
      <van-col span="6"></van-col>
      <van-col span="12"></van-col>
      <van-col span="6" @click="toLogin">前往登录</van-col>
    </van-row>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'register',
  data() {
    return {
      username: '',
      email: '',
      password: '',
      repassword: '',
      emailvalid: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      namevalid: /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/,
      /**
       * 以字母开头，长度在6~18之间，只能包含字母、数字和下划线/^[a-zA-Z]\w{5,17}$/
       * 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
       */
      pwdvalid: /^([a-zA-Z]|[0-9])\w{5,17}$/
    }
  },
  methods: {
    ...mapMutations(['getCookie']),
    toLogin() {
      this.$router.push('/login')
    },
    // 表单提交
    onSubmit(values) {
      this.commen.register(values, res => {
        if (res.data.status === 200) {
          this.$dialog({ message: res.data.msg })
          setTimeout(() => {
            this.$router.push('/home')
          }, 1000)
        } else {
          this.$dialog({ message: res.data.msg })
        }
      })
      // this.$http
      //   .post('/account/register', values)
      //   .then(res => {
      //     if (res.data.status === 200) {
      //       this.$dialog({ message: res.data.msg })
      //       this.commen.login(res.data.userinfo)
      //       setTimeout(() => {
      //         this.$router.push('/home')
      //       }, 1000)
      //     } else {
      //       this.$dialog({ message: res.data.msg })
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err)
      //   })
    },
    // 头部左侧图标动作
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    // 头部右侧图标点击动作
    onClickRight() {
      this.$router.push('/home')
    },
    // 密码表单验证
    verify_repw(val) {
      return this.password === this.repassword
    }
  }
}
</script>
